<template>
	<view class="content">
		<view class="themem-header">
			<u-image width="100%" height="100%" :src="ThemesItem.headImgUrl">
				<u-loading slot="loading"></u-loading>
			</u-image>
		</view>
		<view class="theme-main">
			<product-card @onProductsItemTap='onProductsItemTap' :data="ThemeWithProducts"></product-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ThemesItem : [],
				ThemeWithProducts: [],
				name: '',
				id: null
			};
		},
		async onLoad(options) {
			console.log(options.id,options.name);
			this.name = options.name
			this.id = options.id
			
			let ThemesItem = await uniCloud.callFunction({
				name: 'getThemeData',
				data: {
					id:Number(options.id)
				}
			})
			this.ThemesItem = ThemesItem.result.data[0]
			console.log(this.ThemesItem);
			
			let ThemeWithProducts = await uniCloud.callFunction({
				name:'getThemeWithProducts',
				data:{
					id:Number(options.id)
				}
			})
			this.ThemeWithProducts = ThemeWithProducts.result.data
			console.log(ThemeWithProducts);
			
		},
		onReady() {
			uni.setNavigationBarTitle({
				title:this.name
			})
		},
		methods: {
			onProductsItemTap(id) {
				uni.navigateTo({
					url: "/page_roduct_detail/product/product?id=" + id
				})
			}
		},
	}
</script>

<style lang="scss">
	.content {

		.themem-header {
			
			width: 750rpx;
			height: 400rpx;
			margin-bottom: 20rpx;


			image {
				width: 100%;
				height: 100%;
			}
		}


	}
</style>
